import React, { Component } from "react";
import store from "../../redux/store";
import {
	creatDecrementAction,
	creatIncrementAction,
	creatIncrementAsyncAction,
} from "../../redux/count_action";

class Count extends Component {
	increment = () => {
		const { value } = this.selectNumber;
		store.dispatch(creatIncrementAction(value * 1));
	};

	decrement = () => {
		const { value } = this.selectNumber;
		store.dispatch(creatDecrementAction(value * 1));
	};

	incrementIfOdd = () => {
		const { value } = this.selectNumber;
		if (store.getState() % 2 === 1) {
			store.dispatch(creatIncrementAction(value * 1));
		}
	};

	incrementAsync = () => {
		const { value } = this.selectNumber;
		// setTimeout(() => {
			store.dispatch(creatIncrementAsyncAction(value * 1,500));
		// }, 500);
	};

	render() {
		return (
			<div>
				<h1>当前求和为：{store.getState()}</h1>
				<select ref={(c) => (this.selectNumber = c)}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>
				&nbsp;
				<button onClick={this.increment}>+</button>&nbsp;
				<button onClick={this.decrement}>-</button>&nbsp;
				<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
				&nbsp;
				<button onClick={this.incrementAsync}>异步加</button>&nbsp;
			</div>
		);
	}
}

export default Count;
